<template>
	<view class="content">
		<view class="orderList flex" >
			<view class="flex orderDesc">
				<view>
					<u--image width="150rpx" height="150rpx" :src="goodsInfo.images[0]"></u--image>
				</view>
				<view class="orderTitle">
					<view>{{goodsInfo.title}}</view>
					<view>{{goodsInfo.subtitle}}</view>
				</view>
			</view>
		</view>
		<view class="flex exchangeTime">
			<view class="minWidth150">出行时间</view>
			<view @click="showStartTime">{{startTimePost}}</view>
			 <u-datetime-picker
			 ref="datetimePicker"
			                 :show="startTimeShow"
			                 v-model="startTime"
			                 mode="date"
							 @confirm="startTimeConfirm"
							 @cancel="startTimeConCancel"
							 :formatter="formatter"
			         ></u-datetime-picker>
		</view>
		<view class="flex exchange">
			<view class="flex">
				<view class="minWidth150">出 行 人</view>
				<view class="addUser" @click="addUser">添加</view>
			</view>
			<view class="exchangeSelect">
					<u-checkbox-group
						v-model="exchangeUser"
						placement="column"
					>
						<u-checkbox
							:customStyle="{marginBottom: '18rpx' }"
							v-for="(item, index) in tourismLife"
							:key="index"
							:label="item.username+ ' '+ item.mobile + ' '+ item.card_no"
							:name="item.id"
						>
						<view>{{item.mobile}}</view>
						<view>{{item.userCard}}</view>
						</u-checkbox>
					</u-checkbox-group>
					
			</view>
			
		</view>
		<view class="sureReservation" @click="sureReservation">
			确认预约
		</view>
	</view>
</template>

<script>
	import http from '@/apis/http.js'
	export default {
		data() {
			return {
				goodsId:0,
				goodsInfo:{},
				startTime : Number(new Date()),
				startTimePost: uni.$u.timeFormat(new Date().getTime()),
				startTimeShow:false,
				tourismLife:[],
				exchangeUser:[],
			}
		},

		methods: {
			formatter(type, value) {
			                if (type === 'year') {
			                    return `${value}年`
			                }
			                if (type === 'month') {
			                    return `${value}月`
			                }
			                if (type === 'day') {
			                    return `${value}日`
			                }
			                return value
			            },
			getGoodsInfo(){
				http.POST('goods/info',{goodsId:this.goodsId}).then(res=>{
					if(res.code == 1){
						this.goodsInfo = res.data;
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			getExchangeList(){
				http.POST('user_vip/exchange').then(res=>{
					this.tourismLife = res.data;
				})
			},
			startTimeConfirm(t){
				this.startTimeShow = false;
				 const timeFormat = uni.$u.timeFormat
				this.startTimePost = timeFormat(t.value, 'yyyy-mm-dd')
			},
			startTimeConCancel(){
				this.startTimeShow = false
			},
			showStartTime(){
				this.startTimeShow = true;
			},
			addUser(){
				uni.navigateTo({
					url:'/pages/exchange/add'
				})
			},
			sureReservation(){
	
				if(!this.exchangeUser){
					uni.showToast({
						title:'请填写完善信息',
						icon :'none'
					})
					return
				}
				http.POST('order/createOrder',{startTime:this.startTimePost,exchangeUser:this.exchangeUser,goodsId:this.goodsId}).then(res=>{
					if(res.code == 1){
						uni.reLaunch({
							url:'/pages/order/order'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon : 'none'
						})
					}
				})
				
			},
			
		},
		onLoad(option){
			this.goodsId = option.goodsId
			this.getGoodsInfo()
			this.getExchangeList()
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onShow() {
			this.getExchangeList()
		},

	}
</script>

<style>
.flex{display: flex;}
	.content {  padding: 20rpx; height: 1500rpx;}
	.orderList { padding:10rpx; margin-top: 20rpx; background-color: #fff; flex-direction: column;
	}
	.orderTitle {
		display: flex;
		flex-direction: column;
		line-height: 45rpx;
		flex-grow: 2;
		margin-left: 20rpx;
		
	}
	.orderDesc { align-items: center;}
	.sureReservation {
		width: 95%;
		border-radius: 50rpx;
		padding: 20rpx 0;
		background-color: #5cb9a4;
		text-align: center;
		color: #fff;
		margin-top: 50rpx;
	}
	.exchange { flex-direction: column; justify-content: center; }
	.exchangeTime { padding: 15rpx 0; margin: 20rpx 0; }
	.exchangeSelect { padding: 20rpx;}
	.addUser {
		text-align: center;
		width: 100rpx;
		padding: 5rpx;
		color: #fff;
		margin-left: 20rpx;
		background-color: #5cb9a4;
		border-radius: 50rpx;
	}
	.minWidth150{
		width: 150rpx;
	}
</style>
